<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: 地虎降天龙
 * @Date: 2023-12-11 15:00:44
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2025-09-26 14:26:58
-->

<template>
	<primitive v-if="!isLoading" :object="tsWater" :rotation-x="-Math.PI / 2" />
</template>

<script setup lang="ts">
import { Vector2, PlaneGeometry, BufferGeometry, DoubleSide } from 'three'
import { useTextures } from '@tresjs/cientos'
import { Water } from 'three/addons/objects/Water2'
import { watchEffect, watch } from 'vue'

const props = withDefaults(defineProps<{
	waterGeometry?: BufferGeometry,
	color?: String
	scale?: Number
}>(), {
	waterGeometry: new PlaneGeometry(20, 20),
	color: '#FFF',
	scale: 1.0
})

const { textures: pTexture, isLoading } = useTextures(['./plugins/water/images/Water_1_M_Normal.jpg', './plugins/water/images/Water_2_M_Normal.jpg'])

const wG = props.waterGeometry.clone()
let tsWater = null as any
watch([pTexture, isLoading], ([pTexture, isLoading]) => {
	if (pTexture && !isLoading) {
		tsWater = new Water(
			wG,
			{
				color: props.color,
				scale: props.scale,
				flowDirection: new Vector2(1, 1),
				textureWidth: 1024,
				textureHeight: 1024,
				normalMap0: pTexture[0],
				normalMap1: pTexture[1]
			}
		)
		tsWater.material.transparent = true
		tsWater.material.depthWrite = true
		tsWater.material.depthTest = true
		tsWater.material.side = DoubleSide
	}
})

watchEffect(() => {
	if (props.color) {
		tsWater?.material.uniforms.color.value.set(props.color)
	}
	if (props.scale && tsWater) {
		tsWater.material.uniforms.config.value.w = props.scale
	}
})

</script>
